<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的计时器</title>
    <script src="../../框架/vue.js"></script>
</head>
<body>

<div id="sdd"><!--如果无法正常的显示变量，尝试将DOM和script的位置交换一下，让DOM位于样式的上方-->
  <input type="button" @click="timer" value="开始计时" /><br>
  {{num}}<br>
  <input type="button" @click="stop" value="结束计时" /><br>
</div>

<script>
  let all =new Vue({
    el:'#sdd',
    data(){
      return{
        num:0,
      }
    },
    methods:{
      timer:function (){
        time = setInterval(function () {
          all.num++
        }, 1000)
      },
      stop:function (){
        clearInterval(time);
      }
    }
  });
</script>
</body>
</html>